<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../../javascript/react.js"></script>
<script src="../../../javascript/react-dom.js"></script>
<script src="../../../javascript/babel.js"></script>
<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state = {count: 1}
        }

        render() {
            const {count} = this.state
            return (
                <div className="app">
                    <h1>count的值是:{count}</h1>

                    <button onClick={this.addCount1(10)}>+10</button>
                    <button onClick={this.subCount1(20)}>-20</button>

                    <button onClick={(event) => this.addCount2(event, 30)}>+30</button>
                    <button onClick={(event) => this.subCount2(event, 40)}>-40</button>
                </div>
            )
        }

        addCount1(value) {
            /*注意：return的这个函数才是真正的事件处理函数，React会执行这个函数并且传入事件对象*/
            return (event) => {
                console.log(event.target)
                this.setState({count: this.state.count + value})

            }
        }

        subCount1(value) {
            /*注意：return的这个函数才是真正的事件处理函数，React会执行这个函数并且传入事件对象*/
            return (event) => {
                console.log(event.target)
                this.setState({count: this.state.count - value})
            }
        }

        addCount2(event, value) {
            console.log(event.target)
            this.setState({count: this.state.count + value})
        }

        subCount2(event, value) {
            console.log(event.target)
            this.setState({count: this.state.count - value})
        }
    }
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
</script>
</body>
</html>
